<template>
 
  <div class="ac_alls">
  
    <h2>{{lunwen}}论文</h2>

    <!-- <el-col :span="8" > -->
    <el-card shadow="hover" style="width:1200px;margin-top:10px">
         <div class="ac_shrink">
      <div
        v-for="(item, index) in gonggao_01"
        :key="index"
        class="ac_content_01"
      >
        <div class="sc_content">
          <p class="content_title" @click="Jump(item.id)">{{ item.title }}</p>
          <div
            class="ac_content_02"
            @click="Jump(item.id)"
            v-html="item.content"
          ></div>
        </div>
      </div>
      <!-- 分页 -->
      <div style="margin-left:20px;margin-top:20px"> 
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="page"
          :page-size="row"
          layout="total, prev, pager, next"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
    </el-card>
  <!-- </el-col> -->

  </div>
</template>

<script>
export default {
  mounted() {
    this.lunwen = localStorage.getItem("fenlei")
    this.gonggao();
  },
  data() {
    return {
      gonggao_01: [],
      // 分页
      page: 1,
      row: 4,
      total: 0,

      lunwen: "数学"
    };
  },
  methods: {
    // 哈哈哈
    ceshi(){
      // console.log("测试");
      this.lunwen = localStorage.getItem("fenlei")
      this.gonggao();
    },
    gonggao() {
      this.$http
        .get("/paper/", {
          page: this.page,
          pageSize: this.row,
          category: this.lunwen,
        })
        .then((res) => {
          // console.log(res);
          this.gonggao_01 = res.data;
          this.total = res.data.length;
        });
    },
    Jump(f) {
      this.$router.push({
        name: "details_01",
      });
      localStorage.setItem("tex", f);
    },
    fenlei() {
      this.$router.push({ path: "/fenlei" });
    },
    // 分页
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.page = val;
      this.gonggao()
    },
  },
};
</script>

<style lang="less" scoped>
.ac_alls {
  width: 1200px;
  margin: auto;
  // border: 1px solid #00fff2;
  // margin-right: 50px;
}
.ac_alls h2 {
 width: 200px;
  // margin: 0px 0px 10px 10px;
  text-align: center;
  margin:auto;
  padding: 10px 0px;
border-bottom: 3px solid #515a6e;
border-radius: 5px;

}
.ac_shrink {
  // margin-top:10px ;
  width: 1200px;
  // margin: 0 auto;
  // border: 1px solid #a4a2a2;
  border-radius: 10px;
  // box-shadow: 0px 0px 11px #a4a2a2;
}
.ac_shrink img {
  width: 200px;
  height: 125px;
}
.ac_content_01 {
  margin-left:20px;
  display: flex;
  justify-content: left;
  width: 1100px;
  border-bottom: 1px solid #a3a2a2;
  border-radius: 10px;
  padding: 20px;
}
.sc_content {
  width: 721px;
  height: 125px;
  line-height: 31px;
  padding-left: 25px;
  // border: 1px solid #ff0000;
}
.content_title {
  text-decoration: none;
  color: #1155cf;
  display: block;
  width: 450px;
  cursor: pointer;
  font-size: 19px;
}
.content_title:hover {
  color: #64b0d3;
  text-decoration: underline;
}
.ac_more {
  text-align: left;
  float: right;
  margin-right: 40px;
}
.ac_content_02 {
  width: 1000px;
  height: 95px;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  // border: 1px solid #ff0000;
}
</style>